<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="screen-orientation" content="portrait">
    <meta name="full-screen" content="no">
    <meta name="x5-orientation" content="portrait">
    <meta name="x5-fullscreen" content="false">
    <meta name="viewport" content="initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no,width=device-width,viewport-fit=cover">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="format-detection" content="telephone=no">
    <title>签到打卡</title>
    <script src="./js/rem.js"></script>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/display.css">
    <link rel="stylesheet" href="./css/modal.css">
</head>
<body>
    <div id="wrapper" class="wrapper" style="display: none;">
        <div class="act-logo" v-show ='defultJson.is_logo ==0'>
            <img :src="resImgs.logo" alt="">
        </div>
        <div class="act-banner" :style="{backgroundImage:'url(' + resImgs.bgBox + ')'}"></div>
        <div class="act-calendar">
            <div class="calendar-month">
                <div class="arror-left" @click="pickPre(currentYear,currentMonth)"></div>
                <div class="month-center">
                    {{ currentYear }}年{{ currentMonth }}月
                </div>
                <div class="arror-right" @click="pickNext(currentYear,currentMonth)"></div>
            </div>
            <div class="calendar-day">
                <!-- 星期 -->
                <ul class="weekdays"><li>一</li><li>二</li><li>三</li><li>四</li><li>五</li><li>六</li><li>日</li></ul>
                <!-- 日期 -->
                <ul class="days">
                    <!-- 核心 v-for循环 每一次循环用<li>标签创建一天 -->
                    <li  v-for="dayobject in days">
                        <!--本月-->
                        <!--如果不是本月，改变类名加灰色-->

                        <span v-if="dayobject.day.getMonth()+1 != currentMonth" class="other-month">{{ dayobject.day.getDate() }}</span>

                        <!--如果是本月，还需要判断是不是这一天-->
                        <template v-else>
                            <!-- 过去高亮类名past 已签到active -->
                            <!--今天  同年同月同日-->
                            <span v-if="dayobject.isSign===true" class="active" :style="{backgroundImage:'url(' + resImgs.bgSign + ')'}">{{ dayobject.day.getDate() }}</span>
                            <span v-else-if="dayobject.past && dayobject.past===1" class="today">今</span>
                            <span v-else-if="dayobject.past" class="past">{{ dayobject.day.getDate() }}</span>
                            <span v-else >{{ dayobject.day.getDate() }}</span>
                        </template>
                    </li>
                </ul>
            </div>
            <div class="btn-sign" v-show="yetSign===false" :style="{backgroundImage:'url(' + resImgs.btnBg + ')'}" @click="signFn()">点我签到</div>
            <div class="btn-sign" v-show="yetSign===true" :style="{backgroundImage:'url(' + resImgs.btnBg + ')'}" @click="signFn(1)">今日已签到</div>
            <p>已连续签到 <span>22</span> 天</p>
        </div>
        <!-- 招商 -->
        <div class="link-investment" v-show="defultJson.is_business == 0" :style="{backgroundImage:'url(' + resImgs.investmentBg + ')'}">
            <p class="investment-slogan">{{defultJson.investment_slogan}}</p>
            <div class="btn_content">
                <span class="look_investment_01" @click ="gioInvestment(defultJson.business_url_1)" :style="{backgroundImage:'url(' + resImgs.business_btn_bg1 + ')'}">{{defultJson.business_btn_1}}</span>
                <span class="look_investment_02" @click ="gioInvestment(defultJson.business_url_2)" :style="{backgroundImage:'url(' + resImgs.business_btn_bg1 + ')'}">{{defultJson.business_btn_2}}</span>
            </div>
        </div>
        <!-- 活动规则 -->
        <div class="act-rules" style="white-space: pre-line;" :style="{backgroundImage:'url(' + resImgs.ruleBg + ')'}">{{defultJson.flop_chance}}</div>
        <!-- 活动说明 -->
        <div class="act-explain" :style="{backgroundImage:'url(' + resImgs.explainBg + ')'}">
            1. 五折券、免单券仅限1款指定产品，每日每人仅限消费1次；
            2. 消费者需连续打卡中间不能停断，否则视为无效；
            3. 兑换奖品不能累计，兑换后需重新参与活动，打卡天数需重新计算；
            4. 活动奖品仅限线下到店使用；
            5. 本次活动不与其他活动同享；
            6. 最终活动解释权归门店所有。                            
        </div>
        <div class="btn-coupon1" @click="linkCoupon()" :style="{backgroundImage:'url(' + resImgs.couponBg + ')'}"></div>
        <div class="btn-coupon2" @click="linkCoupon()" :style="{backgroundImage:'url(' + resImgs.giveBg + ')'}"></div>
        <!-- 关注公众号弹框 -->
        <div class="fixed_back" v-show='layerScanCode' @touchmove.prevent>
            <div class="modal-tip modal-scan-code">
                <img class="modal-img" :src="resImgs.modalComImg" alt="">
                <div class="modal-tip-content">
                    <p class="modal-title">关注公众号参与活动</p>
                    <div class="qcode-box">
                        <img src="https://static.kuaidao.cn/qingteng/wx-images/images/qrcode/qrcode_mijie.jpg" alt="">
                    </div>
                    <div class="modal-close" @click="layerScanCode=false"></div>
                </div>
            </div>
        </div>
        <div class="fixed_back" v-show='layerModalObj.layerInitModal' @touchmove.prevent>
            <div class="modal-tip">
                <img class="modal-img" :src="resImgs.modalComImg" alt="">
                <div class="modal-tip-content">
                    <p class="modal-title">{{layerModalObj.initModalText}}</p>
                    <div class="text-center btn-wrap">
                        <a class="btn btn-cancel" :style="{backgroundImage:'url(' + resImgs.btnConfirmSmBg + ')'}" @click="layerModalObj.layerInitModal = false">取消</a>
                        <a class="btn btn-confirm" :style="{backgroundImage:'url(' + resImgs.btnConfirmSmBg + ')'}" @click="confirmFn()">确定</a>
                    </div> 
                </div>
                <div class="modal-close" v-if='layerModalObj.closeBtnIsShow' @click='layerModalObj.layerInitModal = false'></div>
            </div>
        </div>
        <!-- 公用：活动开始结束弹框 -->
        <div class="fixed_back" v-show='initModalObj.layerInitModal' @touchmove.prevent>
            <div class="modal-tip">
                <img class="modal-img" :src="resImgs.modalComImg" alt="">
                <div class="modal-tip-content">
                    <p class="modal-title">{{initModalObj.initModalText}}</p>
                    <div class="text-center btn-wrap">
                        <a class="btn btn-confirm-l" v-show="initModalObj.confirmBtnIsShow" :style="{backgroundImage:'url(' + resImgs.btnConfirmBg + ')'}" @click='initModalObj.layerInitModal = false'>确定</a>
                    </div> 
                </div>
                <div class="modal-close" v-if='initModalObj.closeBtnIsShow' @click='initModalObj.layerInitModal = false'></div>
            </div>
        </div>
        <!-- 分享指示弹框 -->
        <div class="fixed_back" style="background: rgba(0, 0, 0, 0.8);" v-show='layerShareModal' @touchmove.prevent @click='layerShareModal=false'>
            <img class="modal-share-img" src="https://vine-static.kuaidao.cn/images/default/common/share.png" alt="">
        </div>
    </div>
</body>
<script src="https://vine-static.kuaidao.cn/libs/vue.min.js"></script>
<script src="https://vine-static.kuaidao.cn/libs/axios.min.js"></script>
<script src="https://vine-static.kuaidao.cn/libs/qs.min.js"></script>
<script src="./js/defultJson.js"></script>
<script>
    var defultJson = defultJson(); 
    var json = "";
    var jsonUrl = "";
    var mainVM = new Vue({
        el: '#wrapper',
        data: {
            defultJson: defultJson.json, // 其它数据
            resImgs: defultJson.jsonImgs, // 图片数据
            yetSign: false,
            btnDisabled: true,
            layerShareModal: false,
            layerScanCode: false, // 关注公众号
            count_dowm_timer: null, // 倒计时计时器
            active_times: '<span>10</span>天<span>10</span>时<span>10</span>分<span>10</span>秒',
            countDown: 0,
            initActiveMsgObj: {
                is_follow: true,
            }, // 初始化-活动时间
            initModalObj: { // 公用弹框
                initModalText: '敬请期待，活动即将开始',
                layerInitModal: false,
                confirmBtnIsShow: false,
                closeBtnIsShow: true // 是否显示弹窗关闭按钮
            },
            layerModalObj: { // 两个按钮的弹框
                initModalText: '是否立即兑换，立即兑换后，连续打卡重新开始计算',
                layerInitModal: false,
                confirmBtnIsShow: false,
                closeBtnIsShow: true // 是否显示弹窗关闭按钮
            },
            currentDay: "",
            currentMonth: "",
            currentYear: 2020,
            currentWeek: "",
            days: [],
            arrDate: [1578654017,1583755867,1583669467,1582196417], // 签到打卡数据
        },
        created() {
            // this.initActiveMsgFn();

            // 数据获取回来后做如下操作
            this.arrDate = this.arrDate.map(element=>{
                if(!element)return;
                var date = new Date(parseInt(element)*1000);
                var Y = date.getFullYear();
                var M = date.getMonth()+1;
                M = M<10?("0"+M ):M;
                var D = date.getDate();
                D = D<10?("0"+D ):D;
                return Y + "" + M + "" + D;
            });
            this.initData(null);
        },
        methods: {
            signFn(type){
                if(type == 1){
                    this.initModal('今日已签到', true)
                }else{
                    if(!this.initActiveMsgObj.is_follow){ // 如果未关注公众号
                        this.layerScanCode = true;
                    }else{
                        // this.layerShareModal = true;
                        this.initModal("签到成功", true, true);
                    }
                }
            },
            confirmFn(){ // 两个按钮的确认弹框

            },
            linkCoupon(){ // 跳转我的券列表
                if(this.initActiveMsgObj && this.initActiveMsgObj.coupon_url){
                    window.location.href = this.initActiveMsgObj.coupon_url;
                    this.showToast=false;
                }
            },
            initActiveMsgFn() { // 开始时间，结束时间
                var url = "http://vine.kuaidao.cn/app/index.php?i=1&c=entry&op=topic2&do=mock&m=kd_act";
                axios({
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded',
                    },
                    method: 'post',
                    dataType: "json",
                    data: Qs.stringify({
                        tid: this.GetQueryString('tid'),
                    }),
                    url: url
                }).then(function (res) {
                    if(res.data && res.data.result){
                        res = res.data
                        if(res.status == 200){
                            mainVM.initActiveMsgObj = res.result;
                            if (res.result.is_end) {
                                mainVM.initModal('活动已经结束')
                                return
                            }
                            if (res.result.is_start) {
                                mainVM.initModal('敬请期待，活动即将开始');
                                return
                            }
                            if (!res.result.is_start && !res.result.is_end) {
                                if (res.result.start_time && res.result.end_time) {
                                    mainVM.countDown = Number(res.result.end_time); 
                                    mainVM.timeDown();
                                }
                                if(res.result.is_suspend){
                                    mainVM.initModal('敬爱的用户，感谢您对“签到打卡”活动的支持，由于用户参与情况异常火爆，远超过预期，服务器正在升级，请稍后继续参与');
                                    return;
                                }
                            }
                        } else {
                            mainVM.initModal(res.result.message, true)
                        }
                    }
                }).catch(function (error) {
                    console.log(error);
                    mainVM.initModal('请求失败，请稍后重试', true)
                });
            },
            // 打卡 start
            isVerDate (v) {
                var v = this.formatDateStr(v);
                return this.arrDate.includes(v);
            },
            initData: function(cur) {
                var leftcount=0; //存放剩余数量
                var date;
                if (cur) {
                    console.log(cur);
                    date = new Date(cur);
                } else {
                    var now=new Date();
                    var d = new Date(this.formatDate(now.getFullYear() , now.getMonth() , 1));
                    d.setDate(42); // 42 个占位格
                    date = new Date(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
                }
                this.currentDay = date.getDate();
                this.currentYear = date.getFullYear();
                this.currentMonth = date.getMonth() + 1;
                this.currentWeek = date.getDay(); // 1...6,0
                if (this.currentWeek == 0) {
                    this.currentWeek = 7;
                }
                var str = this.formatDate(this.currentYear , this.currentMonth, this.currentDay);
                this.days.length = 0;
                // 今天是周日，放在第一行第7个位置，前面6个
                // 初始化本周
                var today = this.formatDateStr();
                for (var i = this.currentWeek - 1; i >= 0; i--) {
                    var d = new Date(str);
                    d.setDate(d.getDate() - i);
                    var dayobject={}; //用一个对象包装Date对象  以便为以后预定功能添加属性
                    dayobject.day=d;
                    var dateday = this.formatDateStr(d);
                    if (dateday<today){
                        dayobject.past = true;
                    }else if(dateday===today){
                        dayobject.past = 1;
                    }else{
                        dayobject.past = false;
                    }
                    this.days.push(dayobject);//将日期放入data 中的days数组 供页面渲染使用
                }
                //其他周
                for (var i = 1; i <= 42 - this.currentWeek; i++) {
                    var d = new Date(str);
                    d.setDate(d.getDate() + i);
                    var dayobject={};
                    // dayobject.day=d;
                    // dayobject = {day: d,isSign: this.isVerDate(d.getDate()),past: ''}
                    dayobject = {day: d,isSign: this.isVerDate(d), past: ''};
                    var dateday = this.formatDateStr(d);
                    if (dateday<today){
                        dayobject.past = true;
                    }else if(dateday===today){
                        dayobject.past = 1;
                    }else{
                        dayobject.past = false;
                    }
                    this.days.push(dayobject);
                }
            },
            pickPre: function(year, month) {
                // setDate(0); 上月最后一天
                // setDate(-1); 上月倒数第二天
                // setDate(dx) 参数dx为 上月最后一天的前后dx天
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(0);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            pickNext: function(year, month) {
                var d = new Date(this.formatDate(year , month , 1));
                d.setDate(42);
                this.initData(this.formatDate(d.getFullYear(),d.getMonth() + 1,1));
            },
            formatDate: function(year,month,day){// 返回 类似 2020-03-09 格式的字符串
                var y = year;
                var m = month;
                if(m<10) m = "0" + m;
                var d = day;
                if(d<10) d = "0" + d;
                return y+"-"+m+"-"+d
            },
            formatDateStr(timestamp) {// 返回 类似 20200310 格式的字符串，目的做比较大小值
                if(!timestamp){
                    var date = new Date();
                    var Y = date.getFullYear();
                    var M = date.getMonth()+1;
                    M = M<10?("0"+M ):M;
                    var D = date.getDate();
                    D = D<10?("0"+D ):D;
                    return Y + "" + M + "" + D;
                };
                var date = new Date(timestamp);
                var Y = date.getFullYear();
                var M = date.getMonth()+1;
                M = M<10?("0"+M ):M;
                var D = date.getDate();
                D = D<10?("0"+D ):D;
                return Y + "" + M + "" + D;
            },
            // 打卡 end
            GetQueryString(name) { // URL 取值
                var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
                var r = window.location.search.substr(1).match(reg);
                if (r != null) return unescape(r[2]);
                return null;
            },
            initModal(content, confirm, close) { // 公用弹框-活动开始结束弹框
                if (!close) {
                    this.initModalObj.closeBtnIsShow = true;
                } else {
                    this.initModalObj.closeBtnIsShow = false;
                }
                if(confirm){
                    this.initModalObj.confirmBtnIsShow = true;
                }else{
                    this.initModalObj.confirmBtnIsShow = false;
                }
                this.initModalObj.initModalText = content;
                this.initModalObj.layerInitModal = true;
            },
            timeDown() { // 倒计时
                clearInterval(this.count_dowm_timer);
                var nowDate = Math.round(new Date() / 1000); // 当前时间
                var endtime = this.countDown;
                if (endtime < nowDate) {return;}
                var totalSeconds = parseInt((endtime - nowDate)); // 相差的总秒数
                //天数
                var days = Math.floor(totalSeconds / (60 * 60 * 24));
                days = days < 10 ? '0' + days : days;
                //取模（余数）
                var modulo = totalSeconds % (60 * 60 * 24);
                //小时数
                var hours = Math.floor(modulo / (60 * 60));
                hours = hours < 10 ? ('0' + hours) : hours;
                modulo = modulo % (60 * 60);
                //分钟
                var minutes = Math.floor(modulo / 60);
                minutes = minutes < 10 ? '0' + minutes : minutes;
                // 秒
                var seconds = modulo % 60;
                seconds = seconds < 10 ? '0' + seconds : seconds;
                //输出到页面
                this.active_times = '<span>' + days + '</span>天<span>' + hours + '</span>时<span>' + minutes + '</span>分<span>' + seconds + '</span>秒';
                if (totalSeconds <= 0) {
                    clearInterval(this.count_dowm_timer);
                    window.location.reload()
                } else {
                    this.count_dowm_timer = setInterval(this.timeDown, 1000);
                }
            },
            addRules(){
                if(json){
                    var obj = {};
                    this.defultJson = Object.assign(obj,json.activitySetting,json.businessSetting,json.shareSetting,json.shopShareSetting);
                }
                if(jsonUrl){
                    this.resImgs = jsonUrl
                }
            },
            gioInvestment(href){ // 招商
                if(href){window.location.href = href;} 
            }
        },
        mounted() {
            document.getElementById('wrapper').style.display = 'block';
            this.addRules();
        }
    })
</script>
</html>